<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { Link, Plus } from '@element-plus/icons-vue'
import { type AppCollectDto, type AppIssueForm } from '@/api/cap'
import { getCapAppList, capAppIssue } from '@/api/cap'
import { getUserList } from '@/api/sys'
import type { UploadProps, UploadUserFile } from 'element-plus'

const tableData = ref<AppCollectDto[]>([])
const userList = ref<Option[]>([])
onMounted(() => {
  getCapAppList().then((res) => {
    tableData.value = res
    res.forEach((item) => {
      if (!clusterList.value.find((it) => it.value == item.clusterInfo.id)) {
        clusterList.value.push({ text: item.clusterInfo.name, value: item.clusterInfo.id })
      }
    })
  })
  getUserList().then((res) => {
    res.forEach((item) => {
      userList.value.push({
        key: item.userId,
        label: item.username,
      })
    })
  })
})

const showDialog = ref(false)
const isAddForm = ref(false)
const dialogForm = reactive<AppIssueForm>({})
interface Option {
  key: string
  label: string
}
const filterMethod = (query: string, item: Option) => {
  return item.label.toLowerCase().includes(query.toLowerCase())
}

const fileList = ref<UploadUserFile[]>([])
const UploadFileChange: UploadProps['onChange'] = (rawFile: UploadUserFile) => {
  console.log(rawFile)
  const reader = new FileReader()
  reader.readAsDataURL(rawFile?.raw)
  reader.onload = (e: ProgressEvent) => {
    console.log(e)
    fileList.value = [
      {
        name: 'plant-2.png',
        url: e?.target?.result,
      },
    ]
    dialogForm.icon = e?.target?.result
  }
}
const clickEditBtn = (row: AppCollectDto) => {
  isAddForm.value = false

  dialogForm.clusterId = row.clusterInfo.id
  dialogForm.appName = row.appInfo.appName
  dialogForm.exePath = row.appInfo.exePath
  dialogForm.appParams = row.appInfo.appParams
  dialogForm.workSpace = row.appInfo.workSpace
  fileList.value = [
    {
      name: 'plant-2.png',
      url: row.appInfo.icon,
    },
  ]
  dialogForm.icon = row.appInfo.icon
  dialogForm.isSingle = false
  showDialog.value = true
}

const clickSubDialogForm = () => {
  capAppIssue(dialogForm).then(() => {
    showDialog.value = false
  })
}
const filterHandler = (value: string, row: AppCollectDto) => {
  return row.clusterInfo.id == value
}

interface ClusterFilter {
  text: string
  value: string
}
const clusterList = ref<ClusterFilter[]>([])
</script>

<template>
  <div>
    <el-dialog
      v-model="showDialog"
      :title="isAddForm ? '手工添加应用' : '编辑发布应用'"
      width="600"
    >
      <el-form :model="dialogForm" label-width="auto" style="max-width: 700px">
        <el-form-item class="form-item-img-upload">
          <el-upload
            :auto-upload="false"
            list-type="picture-card"
            v-model:file-list="fileList"
            :on-change="UploadFileChange"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="应用名称">
          <el-input v-model="dialogForm.appName" />
        </el-form-item>
        <el-form-item label="启动程序">
          <el-input v-model="dialogForm.exePath" />
        </el-form-item>
        <el-form-item label="启动参数">
          <el-input v-model="dialogForm.appParams" />
        </el-form-item>
        <el-form-item label="工作空间">
          <el-input v-model="dialogForm.workSpace" />
        </el-form-item>
        <el-form-item label="单例应用">
          <el-radio-group v-model="dialogForm.isSingle">
            <el-radio :value="true">单例隔离</el-radio>
            <el-radio :value="false">无限制</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-transfer
            v-model="dialogForm.userIds"
            filterable
            :filter-method="filterMethod"
            filter-placeholder="选择可用该应用的账户"
            :titles="['用户列表', '选中']"
            :data="userList"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="clickSubDialogForm"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-alert
      title="该模块请配合cap client和luancher使用"
      type="warning"
      description="cap是基于rdp协议的扩展，协议会固定拉起launcher，然后通过rdp虚拟通道交换指令。详情参考语雀文档！"
      show-icon
    />
    <el-card>
      <el-table :data="tableData" style="width: 100%" show-overflow-tooltip>
        <el-table-column prop="appInfo.icon" label="图标" width="60">
          <template #default="scope">
            <img :src="scope.row.appInfo.icon" />
          </template>
        </el-table-column>
        <el-table-column prop="appInfo.appName" label="名称" sortable width="150" />
        <el-table-column prop="appInfo.exePath" label="启动文件" />
        <el-table-column prop="appInfo.appParams" label="参数" width="150" />
        <el-table-column prop="appInfo.workSpace" label="工作空间" />
        <el-table-column prop="hostInfo.uid" label="主机UID" width="100" />
        <el-table-column prop="hostInfo.ip" label="主机IP" width="100" />
        <el-table-column
          prop="clusterInfo.name"
          label="集群名称"
          width="100"
          :filters="clusterList"
          :filter-method="filterHandler"
        />
        <el-table-column prop="clusterInfo.clusterType" label="集群类型" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.clusterInfo.clusterType == 1">私有</el-tag>
            <el-tag type="success" v-if="scope.row.clusterInfo.clusterType == 2">独占</el-tag>
            <el-tag type="primary" v-if="scope.row.clusterInfo.clusterType == 3">共享</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-link :icon="Link" type="primary" class="mr-3" @click="clickEditBtn(scope.row)"
              >发布</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
/* :deep(.form-item-img-upload) {
  display: flex;
  justify-content: center;
} */
:deep(.form-item-img-upload .el-form-item__content) {
  display: flex;
  justify-content: center;
}
</style>
